<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>洛阳公交公司退役军人优待证刷卡次数统计</title>
    <link rel="stylesheet" href="lib/bootstrap-4.6.2-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="lib/bootstrap-icons-1.11.3/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="lib/bootstrap-datepicker-1.10.0/css/bootstrap-datepicker.min.css">
    <link rel="stylesheet" href="lib/bootstrap-table-1.22.3/bootstrap-table.min.css">
    <script src="lib/jquery/jquery-3.7.1.min.js"></script>
    <script src="lib/bootstrap-4.6.2-dist/js/bootstrap.min.js"></script>
    <script src="lib/bootstrap-datepicker-1.10.0/js/bootstrap-datepicker.min.js"></script>
    <script src="lib/bootstrap-datepicker-1.10.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>
    <script src="lib/bootstrap-table-1.22.3/bootstrap-table.min.js"></script>
    <script src="lib/bootstrap-table-1.22.3/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<nav class="navbar navbar-dark bg-primary">
    <a class="navbar-brand" href="#">
        <img src="img/logo.svg" class="d-inline-block align-top" height="40" alt="">
        <span class="navbar-brand mb-0 h1 ">洛阳公交公司退役军人优待证刷卡次数统计</span>

    </a>
    <i class="bi bi-gear navbar-brand" role="button" id="settingIcon"
       title="设置"  data-toggle="modal" data-target="#settingModal"
    ></i>
</nav>

<div class="card">
    <div class="card-body">
        <div>
            <form id="queryForm" class="form-inline">
                <div class="form-group  " >
                    <label for="startDate" class="col-form-label ml-4">开始时间：</label>
                    <input type="text" class="form-control ml-2 datepicker" id="startDate" required>
                </div>
                <div class="form-group " >
                    <label for="endDate" class="col-form-label ml-4">结束时间：</label>
                    <input type="text" class="form-control ml-2 datepicker" id="endDate" required>
                </div>
                <div>
                    <button type="button" class="btn btn-primary ml-4" id="queryButton"><i class="bi bi-search"></i> 查询</button>
                    <button type="button" class="btn btn-primary ml-4" id="exportButton"><span class="loading" style="display: none;">
                            <img src="img/loading.svg" style="width:20px; filter: invert(1);">
                        </span> <i class="bi bi-download"></i> 导出</button>
                </div>
            </form>
        </div>
        <br/>
        <table id="table" class="bootstrap-table"></table>
    </div>
</div>



<div role="alert" aria-live="assertive" aria-atomic="true" id="toastInfo" data-delay="3000"
     class=" toast position-fixed  right-0" style="right: 20px; z-index: 2000; top: 100px">
    <div class="toast-body alert alert-success" style="width: 250px; text-align:center">
    </div>
</div>

<div role="alert" aria-live="assertive" aria-atomic="true" id="toastError" data-delay="3000"
     class=" toast position-fixed" style="right: 20px; z-index: 2000; top: 100px">
    <div class="toast-body alert alert-danger" style="width: 250px; text-align:center">
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="settingModal" tabindex="-1" aria-labelledby="settingModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="settingModalLabel">设置</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="loading" id="settingLoading" style="text-align: center">
                    <img src="img/loading.svg" style="width:20px;">
                    <span>加载中...</span>
                </div>
                <form id="settingForm">
                    <div class="form-group row " >
                        <label for="settingJDBCURL" class="col-sm-2 col-form-label">JDBCURL</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="settingJDBCURL" required>
                            <div class="invalid-feedback">请输入JDBCURL</div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="settingUsername" class="col-sm-2 col-form-label">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="settingUsername" required>
                            <div class="invalid-feedback">请输入用户名</div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="settingPassword" class="col-sm-2 col-form-label" >密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="settingPassword" required>
                            <div class="invalid-feedback">请输入密码</div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-primary" id="settingTestButton">
                        <span class="loading" style="display: none;">
                            <img src="img/loading.svg" style="width:20px; filter: invert(1);">
                        </span>
                        测试链接</button>
                    <span class="alert-danger"></span>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="settingSaveButton">
                    <span class="loading" style="display: none;">
                            <img src="img/loading.svg" style="width:20px; filter: invert(1);">
                        </span>
                    保存</button>
            </div>
        </div>
    </div>
</div>



</body>
<script>
    $(function(){
        // 基础url
        var baseURL = '/api';

        $('.datepicker').datepicker({
            format: 'yyyymmdd',
            language: 'zh-CN'
        });

        $('#table').bootstrapTable(
            {
                striped: true,
                showFooter: true,
                data: [],
                columns: [
                    {
                        title: '序号',
                        class: 'table-serial',
                        align: 'left',
                        field: 'serial',
                        formatter: function(value, row, index){
                            return index + 1;
                        },
                        footerFormatter: function(rows){
                            return '合计';
                        },
                    },
                    {
                        title: '线路号',
                        class: 'table-data',
                        align: 'left',
                        field: 'lineNo',
                        footerFormatter: function(rows){
                            return rows.length;
                        },
                    },
                    {
                        title: '交易次数',
                        class: 'table-data',
                        align: 'left',
                        field: 'takeCount',
                        footerFormatter: function(rows){
                            var count = 0;
                            for(var i = 0; i < rows.length; i++){
                                count += rows[i].takeCount;
                            }
                            return count;
                        },
                    }
                ],

            }
        );

        $('#queryButton').click(function(){
            var startDate = $('#startDate').val();
            var endDate = $('#endDate').val();
            if(!startDate){
                $('#toastError .toast-body').html('请选择开始时间');
                $('#toastError').toast('show');
                return;
            };
            if(!endDate){
                $('#toastError .toast-body').html('请选择结束时间');
                $('#toastError').toast('show');
                return;
            }
            $('#table').bootstrapTable('showLoading');
            $.ajax(baseURL + '/report/get',
                {
                    type: 'POST',
                    data: JSON.stringify({startDate: startDate, endDate: endDate}),
                    dataType: 'json',
                    contentType: 'application/json',
                    success: function(res){
                        if(res.code != 200){
                             $('#toastError .toast-body').html(res.msg);
                             $('#toastError').toast('show');
                             $('#table').bootstrapTable('hideLoading');
                            $('#table').bootstrapTable('load', []);
                        }
                        else{
                            $('#table').bootstrapTable('hideLoading');
                            $('#table').bootstrapTable('load', res.data);
                        }
                    },
                }
            );
        });

        $('#settingTestButton').click(function(event){
            var form = $('#settingForm')[0];
            if (form.checkValidity() === false) {
              event.preventDefault();
              event.stopPropagation();
              return;
            }
            var data = {
                jdbcUrl: $('#settingJDBCURL').val(),
                username: $('#settingUsername').val(),
                password: $('#settingPassword').val()
            };
            var dataSerial = JSON.stringify(data);
            $('#settingTestButton .loading').show();
            $('#settingTestButton').attr('disabled', 'disabled');
            $.ajax(baseURL + '/config/test',
                {
                    type: 'POST',
                    data: dataSerial,
                    dataType: 'json',
                    contentType: 'application/json',
                    success: function(res){
                        if(res.code != 200){
                            $('#settingForm .alert-danger').html(res.msg);
                            $('#toastError .alert-danger').html(res.msg);
                            $('#toastError').toast('show');
                        }
                        else{
                            $('#settingForm .alert-danger').html('连接成功');
                        }
                    },
                    complete: function(){
                       $('#settingTestButton').removeAttr('disabled');
                       $('#settingTestButton .loading').hide();
                    }
                }
            );
            form.classList.add('was-validated');
        });


        $('#settingSaveButton').click(function(event){
            var form = $('#settingForm')[0];
            if (form.checkValidity() === false) {
              event.preventDefault();
              event.stopPropagation();
              return;
            }
            var data = {
                jdbcUrl: $('#settingJDBCURL').val(),
                username: $('#settingUsername').val(),
                password: $('#settingPassword').val()
            };
            var dataSerial = JSON.stringify(data);
            $('#settingSaveButton .loading').show();
            $('#settingSaveButton').attr('disabled', 'disabled');
            $.ajax(baseURL + '/config/save',
                {
                    type: 'POST',
                    data: dataSerial,
                    dataType: 'json',
                    contentType: 'application/json',
                    success: function(res){
                        if(res.code != 200){
                            $('#toastError .alert-danger').html(res.msg);
                            $('#toastError').toast('show');
                        }
                        else{
                            $('#toastInfo .alert-success').html('保存成功');
                            $('#toastInfo').toast('show');
                            $('#settingModal').modal('hide');
                        }
                    },
                    complete: function(){
                       $('#settingSaveButton').removeAttr('disabled');
                       $('#settingSaveButton .loading').hide();
                    }
                }
            );
            form.classList.add('was-validated');
        });

        $('#settingIcon').click(function(e){
            $('#settingLoading').show();
            $('#settingForm').hide();
            $('#settingForm .alert-danger').html('');
            $.ajax(baseURL + '/config/get', {
                method: 'POST',
                dataType: 'json',
                success: function(res){
                    if(res.code != 200){
                         $('#toastError .toast-body').html(res.msg);
                         $('#toastError').toast('show');
                    }
                    else{
                        $('#settingJDBCURL').val(res.data.jdbcUrl);
                        $('#settingUsername').val(res.data.username);
                        $('#settingPassword').val(res.data.password);
                    }
                },
                complete: function(){
                    $('#settingLoading').hide();
                    $('#settingForm').show();
                }
            })
        });

        $('#exportButton').click(function(){
            var startDate = $('#startDate').val();
            var endDate = $('#endDate').val();
            if(!startDate){
                $('#toastError .toast-body').html('请选择开始时间');
                $('#toastError').toast('show');
                return;
            };
            if(!endDate){
                $('#toastError .toast-body').html('请选择结束时间');
                $('#toastError').toast('show');
                return;
            }
            $('#exportButton .loading').show();
            $('#exportButton').attr('disabled', 'disabled');
            $.ajax(baseURL + '/report/export',
                {
                    type: 'POST',
                    data: JSON.stringify({startDate: startDate, endDate: endDate}),
                    cache: false,
                    dataType: 'binary',
                    processData: false,
                    xhrFields: {responseType: 'blob'},
                    contentType: 'application/json',
                    success: function(res, textStatus, xhr){
                        var type = xhr.getResponseHeader('Content-Type');
                        var blob = new Blob([res], {type: type});
                        var URL = window.URL || window.webkitURL;
                        var objectUrl = URL.createObjectURL(blob);
                        var fileName = decodeURI(xhr.getResponseHeader('Content-Disposition').split('filename=')[1]);
                        if(fileName){
                            var a = document.createElement('a');
                            if(typeof a.download === 'undefiend'){
                                window.location = objectUrl;
                            }else{
                                a.href = objectUrl;
                                a.download = fileName;
                                document.body.appendChild(a);
                                a.click();
                                a.remove();
                            }
                        }else{
                            window.location = objectUrl;
                        }
                    },
                    error(jqXHR, textStatus, errorThrown){
                         $('#toastError .toast-body').html('网络异常'  + errorThrown);
                        $('#toastError').toast('show');
                        return;
                    },
                    complete: function(){
                       $('#exportButton').removeAttr('disabled');
                       $('#exportButton .loading').hide();
                    }
                }
            );
        });
    });
</script>
<style>
    .table-serial{
        width: 100px;
    }
    .table-data{
        width: 50%;
    }
    @keyframes rotate {
   0% { transform: rotate(0deg); } /* 初始状态 */
   100% { transform: rotate(360deg); } /* 结束状态 */
}


    .loading img{
animation: rotate 2s linear infinite; /* 设置动画属性为无限次重复并线性变化 */
    }
</style>
</html>